// 该文件专门用于创建整个应用的路由器
// 引入VueRouter
import VueRouter from "vue-router";
// 引入组件
import About from '../views/About'
import Home from '../views/Home'
import News from '../views/News'
import Message from '../views/Message'
import Detail from '../views/Detatil'


// 创建router实例对象，在这里配置一组一组的路由规则
const router = new VueRouter({
    // 配置路由
    routes:[
        // 配置路由规则：path（路径）；component（路由对应的组件）。   每个路由的配置写在一个对象{}，对象之间用','间隔
        // 一级路由
        {
            name:'about',
            path:'/about',
            component:About,
            // 路由数据元：设置当下路由特殊需要使用的数据
            meta:{title:'关于'}
        },
        // 一级路由
        {
            name:'home',
            path:'/home',
            component:Home,
            // 路由数据元：设置当下路由特殊需要使用的数据
            meta:{title:'主页'},
            // 二级路由（二级路由的path不用加'/'，只需要在跳转的router-link标签的to属性加上一级路由的名称，例如/home/message....）
            children:[
                {
                    name:'message',
                    path:'message',
                    component:Message,
                    meta:{title:'消息'},
                    // 三级路由
                    children:[
                        // name属性：为路由命名，每个路由都可以配置name属性，在需要引用路由的路径时，可以直接写name属性的命名
                        {
                            name:'detail',
                            path:'detail/:id/:title/:info', // 使用占位符声明接收params参数
                            component:Detail,
                            meta:{title:'详情'},
                            // props的第一种写法，值为对象，该对象中所有的key-value都会以props的形式传给Detail组件。
                            // props:{id:1,msg:'hello'} // 少用，了解即可

                            // props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的'所有params参数'以props的形式传给Detail组件
                            // props:true

                            // props的第三种写法，值为函数，函数形参里拿到的参数可以是route里的所有数据，这一写法通用params和query两种传参
                            props(route){
                                return {
                                    id:route.params.id,
                                    title:route.params.title,
                                    info:route.params.info,
                                    a:1,
                                    b:'hello'
                                }
                            }
                        }
                    ]
                },
                {
                    name:'news',
                    path:'news',
                    component:News,
                    meta:{title:'新闻'}
                }
            ]
        },
    ]
})

// '前置'路由守卫（初始化的时候被调用、每次路由'切换之前'被调用）
router.beforeEach((to ,from ,next)=>{
    console.log('--前置路由守卫--','目标路由:',to,'来源路由:',from);
    
    if(to.path === '/home/news' || to.path === '/home/message'){
        if(localStorage.getItem('schoolName') === 'gxkjsf'){ // 这里使用本地存储自己加的schoolName做个权限测试
            next(); // 放行（它也可以写成next('路径')）
        }else{
            alert('无权限')
        }
    }else{
        next();
    }
    
})

// '后置'路由守卫（初始化的时候被调用、每次路由'切换之后'被调用） ps:后置路由守卫没有next，因为是跳转之后才会触发，因此next就起不到什么作用了。
router.afterEach((to ,from)=>{
    console.log('--后置路由守卫--','目标路由:',to,'来源路由:',from);
    // 设置网页标题，在每次切换路由之后设置
    document.title = to.meta.title || '硅谷系统';
})

// 暴露router实例对象
export default router